<style scoped lang="less">
.commentsBox{
  user-select: text;
  width: 100%;
  flex: 1;
  &__title{
    font-weight: 500;
    font-size: 18px;
    color: #141B27;
  }
  &__list{
    &__item{
      display: flex;
      flex-flow: row nowrap;
      margin: 10px 0;
      &__avatar{
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 8px;
      }
      &__info{
        padding-bottom: 10px;
        flex: 1;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(153, 153, 153, 0.22);
        &__row-1{
          font-size: 12px;
          display: flex;
          &__user-name{
            color: #3a63ac;
            cursor: pointer;
          }
          &__content{
            &::selection{
              color: white;
              background: rgba(255, 0, 0, 0.42);
              text-shadow: none;
            }
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            word-wrap: break-word;
            white-space: pre-wrap;
          }
        }

        &__row-2{
          margin-top: 8px;
          display: flex;
          flex-flow: row nowrap;
          &__time{
            display: flex;
            flex-flow: row nowrap;
            font-size: 12px;
            &__label{
              color: #999999;
            }
            &__value{

            }
          }
          &__likes-count{
            margin-left: 10px;
            display: flex;
            flex-flow: row nowrap;
            font-size: 12px;
            &__label{
              color: #999999;
            }
            &__value{
              color: #999999;
            }
          }
        }
      }
    }
  }
}
</style>
<template>
  <div class="commentsBox" ref="commentsBox">
    <div class="commentsBox__title">精彩评论</div>
    <div class="commentsBox__list">
      <div class="commentsBox__list__item" v-for="(ele,index) of commentsList" :key="index">
        <img :src="ele.avatar" class="commentsBox__list__item__avatar">
        <div class="commentsBox__list__item__info">
          <!--       昵称 信息       -->
          <div class="commentsBox__list__item__info__row-1">
            <div class="commentsBox__list__item__info__row-1__user-name">{{ ele.userName }}：</div>
            <div class="commentsBox__list__item__info__row-1__content">{{ ele.content }}</div>
          </div>
          <!--        时间 点赞数      -->
          <div class="commentsBox__list__item__info__row-2">
            <div class="commentsBox__list__item__info__row-2__time">
              <div class="commentsBox__list__item__info__row-2__time__label">{{ ele.time }}</div>
            </div>
            <div class="commentsBox__list__item__info__row-2__likes-count">
              <div class="commentsBox__list__item__info__row-2__likes-count__label">点赞数：</div>
              <div class="commentsBox__list__item__info__row-2__likes-count__value">{{ ele.likesCount }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Paging @update:page-num="nextPage" :page-num="commentsParams.offset" :total="listCount" :page-size="commentsParams.limit"/>
  </div>
</template>

<script lang="ts" setup>

const props = defineProps({
  el:{ type:HTMLElement, value: null }
})
import {computed, ref, watch} from "vue";
import Paging from '@/components/paging'
import netEasyMusicStore from '../../store'
import { AxiosService } from "@/core";
const axios = new AxiosService('netEasyMusic')
import {formatNumber, getDomPosition, setTimer} from "@/helper";
const musicId = computed(() => netEasyMusicStore.$state.playing?.id)
const commentsBox = ref(null)
// 歌曲评论参数
const commentsParams = ref({
  id:null,
  limit: 50,
  offset: 1
})
const params = computed(() => ({
  ...commentsParams.value,
  offset: (commentsParams.value.offset -1) * commentsParams.value.limit
}))
const listCount = ref(0)
// 评论列表
let commentsListApi = ref([])
const commentsList = computed(() => commentsListApi.value?.map((ele:any) => ({
  ...ele,
  avatar: ele?.user?.avatarUrl, // 用户头像
  userName: ele?.user?.nickname ?? '-', // 用户昵称
  content: ele?.content ?? '', // 评论内容
  time: ele?.timeStr ?? '未知时间', // 评论时间
  likesCount: formatNumber(ele?.likedCount,'unit',0), // 点赞数量
})))
const showDetail = computed(() => netEasyMusicStore.$state.showDetail)
// 逻辑
/** 监听id状态变化 */
watch(musicId, value => {
  commentsParams.value.id = value
  commentsParams.value.offset = 1
  getComments()
})
/** 监听页面加载变化 */
watch(showDetail, value => {
  if(value && !commentsListApi.value.length){
    commentsParams.value.id = musicId.value
    commentsParams.value.offset = 1
    getComments()
  }
})
const nextPage = (event:number) => {
  commentsParams.value.offset = event
  getComments()
}
// 请求
/** 获取歌曲评论信息 */
const getComments = () => {
  return axios.get({
    api:'/comment/music',
    params: params.value,
    success: ({comments,total}) => {
      commentsListApi.value =comments ?? []
      listCount.value = total
      scrollElement()
    }
  })
}
/** 滚动dom */
const scrollElement = () => {
  if(!props.el || !commentsBox.value) return console.error('滚动出错!')
  const { offset } = commentsParams.value
  const {scrollTop} = props.el
  const { top } = getDomPosition(commentsBox.value,true)
  if(offset === 1) return props.el.scrollTo({top:0,left:0,behavior:'smooth'})
  props.el.scrollTo({ top,
    behavior:'smooth'})
}
</script>

